<template>
    <el-config-provider :locale="zhCn">
        <div>
            <el-form :model="jobTransferData" ref="form" label-width="120px">
                <el-row :gutter="24">
                    <el-col :span="24">
                        <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                            <el-form-item label="岗位调动信息" label-position="top"
                                :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                <div class="progress-bar">
                                    <div class="progress"></div>
                                </div>
                            </el-form-item>
                        </div>
                    </el-col>

                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="员工姓名" label-position="top" required>
                                <el-input v-model="jobTransferData.employeeName" :disabled="!isEditing" style="width: 260px;" clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="工号" label-position="top" required>
                                <el-input v-model="jobTransferData.employeeId" :disabled="!isEditing" style="width: 260px;" clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="原部门" label-position="top" required>
                                <el-input v-model="jobTransferData.originalDepartment" :disabled="!isEditing" style="width: 260px;" clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="原岗位" label-position="top" required>
                                <el-input v-model="jobTransferData.originalPosition" :disabled="!isEditing" style="width: 260px;" clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="调入部门" label-position="top" required>
                                <el-input v-model="jobTransferData.transferDepartment" :disabled="!isEditing" style="width: 260px;" clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="调入岗位" label-position="top" required>
                                <el-input v-model="jobTransferData.transferPosition" :disabled="!isEditing" style="width: 260px;" clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="聘用形式" label-position="top" required>
                                <el-input v-model="jobTransferData.employmentForm" :disabled="!isEditing" style="width: 260px;" clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="入职时间" label-position="top" required>
                                <el-date-picker 
                                    v-model="jobTransferData.entryDate" 
                                    type="date" 
                                    :disabled="!isEditing" 
                                    style="width: 260px;"
                                    value-format="YYYY-MM-DD">
                                </el-date-picker>
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="经办HR" label-position="top" required>
                                <el-input v-model="jobTransferData.handlingHr" :disabled="!isEditing" style="width: 260px;" clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="调动原因" label-position="top" required>
                                <el-input 
                                    v-model="jobTransferData.transferReason" 
                                    :disabled="!isEditing" 
                                    type="textarea" 
                                    :rows="2" 
                                    style="width: 260px;" 
                                    clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="调动后薪资" label-position="top" required>
                                <el-input v-model="jobTransferData.newSalary" :disabled="!isEditing" style="width: 260px;" clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="完成时间" label-position="top" required>
                                <el-date-picker 
                                    v-model="jobTransferData.completionTime" 
                                    type="date" 
                                    :disabled="!isEditing" 
                                    style="width: 260px;"
                                    value-format="YYYY-MM-DD">
                                </el-date-picker>
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="HR确认" label-position="top" required>
                                <el-select v-model="jobTransferData.hrConfirmation" :disabled="!isEditing" style="width: 260px;">
                                    <el-option label="已确认" value="已确认" />
                                    <el-option label="未确认" value="未确认" />
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="申请时间" label-position="top" required>
                                <el-date-picker 
                                    v-model="jobTransferData.applicationDate" 
                                    type="date" 
                                    :disabled="!isEditing" 
                                    style="width: 260px;"
                                    value-format="YYYY-MM-DD">
                                </el-date-picker>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <hr>
                <el-form-item style="margin-top: 6px;">
                    <el-button v-if="!isEditing" type="primary" @click="enableEditing">修改</el-button>
                    <el-button v-if="isEditing" type="primary" @click="saveChanges">保存</el-button>
                    <el-button v-if="isEditing" @click="cancelEditing">取消</el-button>
                    <el-button @click="handleClose">返回</el-button>
                </el-form-item>
            </el-form>

        </div>

    </el-config-provider>
</template>

<script setup>
import { ref } from 'vue';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import { ElMessage } from 'element-plus';
import axios from 'axios';

const jobTransferData = ref({
  employeeName: '',
  employeeId: '',
  originalDepartment: '',
  originalPosition: '',
  transferDepartment: '',
  transferPosition: '',
  employmentForm: '',
  entryDate: '',
  handlingHr: '',
  transferReason: '',
  newSalary: '',
  completionTime: '',
  hrConfirmation: '未确认',
  applicationDate: ''
});

// 原始数据备份，用于取消编辑时恢复
const originalData = ref({});

// 控制是否处于编辑状态
const isEditing = ref(false);

// 设置岗位调动数据
const setJobTransferData = (data) => {
  jobTransferData.value = {
    ...jobTransferData.value,
    ...data
  };
  // 保存原始数据
  originalData.value = { ...jobTransferData.value };
};

// 启用编辑模式
const enableEditing = () => {
  isEditing.value = true;
  // 保存当前数据作为原始数据
  originalData.value = { ...jobTransferData.value };
};

// 保存修改
const saveChanges = async () => {
  try {
    const response = await axios.put('/api/jobtransfer/update', jobTransferData.value);
    if (response.data.code === 200) {
      ElMessage.success('保存成功');
      isEditing.value = false;
      originalData.value = { ...jobTransferData.value };
      emits('updated');
    } else {
      ElMessage.error('保存失败: ' + response.data.message);
    }
  } catch (error) {
    console.error('保存失败:', error);
    ElMessage.error('保存失败: ' + (error.response?.data?.message || error.message));
  }
};

// 取消编辑
const cancelEditing = () => {
  // 恢复原始数据
  jobTransferData.value = { ...originalData.value };
  isEditing.value = false;
};

// 关闭详情页
const handleClose = () => {
  emits('close');
};

// 定义 emits
const emits = defineEmits(['close', 'updated']);
defineExpose({
  setJobTransferData
});

const form = ref(null);
</script>

<style scoped>
.progress-bar {
    height: 6px;
    background-color: #ccebf7;
    border-radius: 3px;
    display: flex;
    width: 100%;
    overflow: hidden;
}

.progress {
    width: 8%;
    height: 10;
    background-color: #61c3ea;
    border-radius: 3px 0 0 3px;
    transition: width 0.3s ease;
}

.el-radio.is-checked .radio-custom {
    background-color: #61c3ea;
    border-color: #409EFF;
}
</style>